<template>
    <div class="main" ref="main">
        <div class="bar-top">
            <van-nav-bar style="background-color: #3172ea;display: block;">
                <template #left>
                    <div @click="onClickLeft" style="color: white;">
                        <van-icon name="arrow-left" size="18" color="#fff" />
                        <span style="font-size: 16px; line-height: 20px;">医院体检套餐</span>
                        <!-- <van-icon name="" size="18"></van-icon> -->
                    </div>
                </template>
            </van-nav-bar>
            <!-- {{ hospitalInfo }} -->
            <div class="top">
                <div class="topTitle">
                    <img :src="hospitalInfo.h_cover" alt="">
                    <div>
                        <h3>{{ hospitalInfo.h_name }}</h3>
                        <div class="card">
                            <span>{{ hospitalInfo.h_order }}</span>
                            <span>公立</span>
                        </div>
                    </div>
                </div>
                <div class="location">
                    <span>地址:{{ location }}</span>
                    <i class="iconfont icon-weizhi"></i>
                </div>
            </div>
        </div>
        <div class="content">
            <!-- <div class="xiala">
                <van-dropdown-menu>
                    <van-dropdown-item v-model="value1" :options="option[0]" />
                    <van-dropdown-item v-model="value2" :options="option[1]" />
                    <van-dropdown-item v-model="value3" :options="option[2]" />
                </van-dropdown-menu>
            </div>
            <div class="xuanze">

                
                <van-tabs v-model:active="active">
                    <van-tab title="入职体检"></van-tab>
                    <van-tab title="老年体检"></van-tab>
                    <van-tab title="儿童体检"></van-tab>
                    <van-tab title="婚检孕检"></van-tab>
                </van-tabs>
            </div> -->
            <div class="list">
                <!--  @refresh="onRefresh" -->
                <van-pull-refresh v-model="refreshing">
                    <van-list v-model:loading="loading" :finished="finished" v-if="healthExaminationTao.length">
                        <CommodityList v-for="(item, i) in healthExaminationTao"  :key="i"
                            @click="$router.push('/set_meal_details/' + item.s_id)" :taocan="item">
                        </CommodityList>
                    </van-list>
                    <div v-else style="text-align: center;color: #999;">没有数据!!!!!</div>
                </van-pull-refresh>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeMount, reactive } from 'vue';
// import CommodityList from "@/components/CommodityList.vue";
import router from '@/router';
import { useScrollParent, useEventListener } from '@vant/use';
import { useRoute } from 'vue-router';
import httpApi from '@/http';
import { taocanType, hospital } from "@/type/Location"
const route = useRoute() // 当前路由对象


// 保存医院信息
// let hospitalInfo=reactive<hospital>({})
let hospitalInfo = ref<hospital>({})

// 是否处于加载状态，加载过程中不触发 load 事件
const loading = ref(false);
// 下拉刷新
const refreshing = ref(false);
// 是否已加载完成，加载完成后不再触发 load 事件
const finished = ref(false);
// 在组件挂在的时候请求当前医院信息

// 接收路径参数：id   
let id = route.params.id;
onMounted(() => {
    httpApi.examination.queryHospitalById({ h_id: id }).then(res => {
        // console.log("id", id);
        hospitalInfo.value = res.data.data[0];
        // console.log('INFO:', hospitalInfo.value);
        loading.value = true;
        finished.value = true;
    })
});
// 请求医院的体检套餐
// 保存医院信息体检套餐信息
let healthExaminationTao = reactive<taocanType[]>([]);
onMounted(() => {
    httpApi.examination.queryPackageByHospital({ hospital_id: id }).then(res => {
        // console.log('RES:', res);
        healthExaminationTao.splice(0, healthExaminationTao.length, ...res.data.data)
        // console.log('healthExaminationTao:', healthExaminationTao);
    });
})

// 
onMounted(() => {
    document.documentElement.scrollTop = 0
})

const onClickLeft = function () {
    router.go(-1);
}
let location = '新建东路29号'
let active = ''
let kind = ''
const value1 = ref(0);
const value2 = ref('a');
const value3 = ref('a');
const option = [
    [{ text: '全部商品', value: 0 },
    { text: '新款商品', value: 1 },
    { text: '活动商品', value: 2 },
    ],
    [{ text: '默认排序', value: 'a' },
    { text: '好评排序', value: 'b' },
    { text: '销量排序', value: 'c' },
    ],
    [{ text: '默认排序', value: 'a' },
    { text: '好评排序', value: 'b' },
    { text: '销量排序', value: 'c' },
    ]
];

// 下拉刷新的方式
// const onRefresh = function () {
//     console.log('下拉刷新，没有实现');
//     httpApi.examination.queryPackageByHospital({ hospital_id: id }).then(res => {
//         console.log('RES:', res);
//         healthExaminationTao.value = res.data.data
//         console.log('healthExaminationTao:', healthExaminationTao.value);

//     });
// }


// onLoad触底加载(滚动条与底部距离小于 offset 时触发)
// const onLoad = function () {
//     console.log('触底加载');
// }
</script>

<style lang="scss" scoped>
@import url("//at.alicdn.com/t/c/font_3903764_8kotvp32fp4.css");

* {
    font-size: 14px;
}

p,
body {
    margin: 0;
}

h3 {
    margin: 0;
}

.main {

    // background-color: #3172ea;
    >div.bar-top {
        background-color: #3172ea;

        >.top {
            color: white;
            padding: 0 10px;
            background-color: #3172ea;
            padding: 20px;

            >.topTitle {
                display: flex;

                >img {
                    width: 50px;
                    height: 50px;
                    vertical-align: middle;
                }

                >div {
                    margin-left: 20px;

                    >h3 {
                        font-size: 16px;
                        margin-bottom: 8px;
                    }

                    .card {
                        span {
                            color: white;
                            margin-right: 5px;
                            padding: 0 5px;
                            background-color: #d99f63;

                            &:nth-child(2) {
                                background-color: #f8af5a;
                            }
                        }
                    }
                }


            }

            >.location {

                margin-top: 30px;
                height: 40px;
                padding: 0 15px;
                line-height: 40px;
                border-radius: 20px;
                background-color: #427de5;
                display: flex;
                justify-content: space-between;
            }

        }
    }

    .content {

        // background: #f4f4f4;
        >.list {
            // background: white;
            margin: 0 10px;
            padding: 0 10px;
            padding-top: 30px;
        }
    }
}
</style>